<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表实例</title>
</head>

<body>
	<!--无序列表-->
	<h4>征文排行</h4>
	<ul><li>有一种毕业，叫先走一步</li>
		<li>用今生的修行，为你们的来生祈福</li>
		<li>我的初恋</li>
		<li>当你老了</li>
		<li>我就在这里旅行，给你讲沿途的风景</li>
		<li>有多少爱可以重来</li>
		<li>我的“天空之城”</li>
	</ul>
	<hr />
	
	<!--有序列表-->
	<h4>征文排行</h4>
	<ol>
		<li>有一种毕业，叫先走一步</li>
		<li>用今生的修行，为你们的来生祈福</li>
		<li>我的初恋</li>
		<li>当你老了</li>
		<li>我就在这里旅行，给你讲沿途的风景</li>
		<li>有多少爱可以重来</li>
		<li>我的“天空之城”</li>
	</ol>
	<hr />
	
	<!--定义列表-->
	<h4>高分电影排行榜</h4>
        <dl>
            <dt>按类型排行</dt>
                <dd>爱情</dd>
                <dd>喜剧</dd>
                <dd>其他类型</dd>
            <dt>按年代排行</dt>
                <dd>2020</dd>
                <dd>2019</dd>
                <dd>其他年代</dd>
        </dl>
	<hr />
	
	<ul><!--无序列表-->
			<li>点击排行</li>
			<ol><!--无序列表-->
				<li>十条设计原则教你学会如何设计网页布局</li>
				<li>6条网页设计配色原则,让你秒变配色高手</li>
				<li>三步实现滚动条触动css动画效果</li>
			</ol>
		<hr /><!--水平分隔线-->
			<li>猜你喜欢</li>
			<ul><!--嵌套有序列表-->
				<li>安静地做一名爱设计的女子</li>
				<li>个人博客，属于我的小世界</li>
			</ul>
			<hr /><!--水平分隔线-->
			<li>欢迎联系</li>
			<dl>
				<dt>电话：</dt>
				<dd>010-22363123</dd>
				<dt>地址：</dt>
				<dd>北京市东城区长安街3号</dd>
			</dl>
		</ul>
	<hr />
	
	<!--表格-->
	<table>
			<caption>班级名单</caption>
			<tr><th>姓名</th><th>性别</th><th>专业</th></tr>
			<tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr>
			<tr><td>李四萍</td><td>女</td><td>软件工程</td></tr>
			<tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr>
		</table>
		<table border="1" cellspacing="10" cellpadding="20">
			<caption>班级名单</caption>
			<tr><th>姓名</th><th>性别</th><th>专业</th></tr>
			<tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr>
			<tr><td>李四萍</td><td>女</td><td>软件工程</td></tr>
			<tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr>
		</table>
	<hr />
	
	<!--跨行跨列表格-->
	<table width="300" border="2">
			<tr>
				<td colspan="3">课程成绩</td><!--设置单元格水平跨3列-->
			</tr>
			<tr>
				<td rowspan="2">语文</td><!--设置单元格垂直跨2行-->
				<td>期中</td>
				<td>89</td>
			</tr>
			<tr>
				<td>期末</td>
				<td>92</td>
			</tr>
			<tr>
				<td rowspan="2">英语</td><!--设置单元格垂直跨2行-->
				<td>期中</td>
				<td>95</td>
			</tr>
			<tr>
				<td>期末</td>
				<td>90</td>
			</tr>
	<hr />
		
	<!--表格数据的分组-->
	<table border="0" width="420"><!--设置表格宽度为420px，无边框-->
			<caption>成绩汇总表</caption>
			<thead style="background:#FAF0E6"><!--设置表格的页眉-->
				<tr>
					<th>姓名</th>
					<th>语文</th>
					<th>数学</th>
					<th>英语</th>
				</tr>
			</thead><!--表格页眉结束-->
		<tbody style="background:#FFFAF0"><!--设置表格主体-->
				<tr>
					<td>张三丰</td>
					<td>90</td>
					<td>92</td>
					<td>98</td>
				</tr>
				<tr>
					<td>李四萍</td>
					<td>96</td>
					<td>100</td>
					<td>90</td>
				</tr>
				<tr>
					<td>王五一</td>
					<td>93</td>
					<td>97</td>
					<td>97</td>
				</tr>
			</tbody><!-表格主体结束-->
		<tfoot style="background:#FAF0E6"><!--设置表格的数据页脚-->
				<tr>
					<td>平均分数</td>
					<td>93</td>
					<td>96</td>
					<td>95</td>
				</tr>
			</tfoot><!--表格页脚结束-->
		</table>
	<hr />

		
	<table border="1">
			<colgroup>
				<col width="150" style="background:#FFFAF0">
				<col width="100" style="background:#8d8d8d">
				<col width="200" style="background:#FFFAF0">
			</colgroup>
			<tr>
				<th>姓名</th>
				<th>姓名</th>
				<th>专业</th>
			</tr>
			<tr>
				<td>张三丰</td>
				<td>男</td>
				<td>大数据与信息处理技术</td>
			</tr>
			<tr>
				<td>李四萍</td>
				<td>女</td>
				<td>软件工程</td>
			</tr>
			<tr>
				<td>王五一</td>
				<td>女</td>
				<td>计算机科学与技术</td>
			</tr>
		</table>
	<hr />

		
	<form action="" method="post">
			<label for="username">用户名：</label><input id="username" type="text" name="user" /><br />
			<label>密码：<input type="password" name="passwd" /></label><br />
	</form>
	<hr />
	
	
	
	<form action="" method="post">
			你希望从事的专业？（单选）
			<select>
				<option value="front">前端开发</option>
				<option value="back">后端开发</option>
				<option value="ai">人工智能</option>
			</select><br /><br />
                                           你熟悉的技术有哪些？（多选）
			<select size="3" multiple="multiple">
				<option value="html">HTML</option>
				<option value="jq" selected="selected">JQuery</option>
				<option value="mysql">MySQL</option>
				<option value="asp">ASP.NET</option>
			</select><br /><br />
			你希望到哪个城市工作？（多选）
			<select size="8" multiple="multiple">
				<optgroup label="华北地区">
					<option value="beijing">北京市</option>
					<option value="tianjin">天津市</option>
					<option value="hebei">河北省</option>
				</optgroup>
				<optgroup label="华东地区">
					<option value="shanghai">上海市</option>
					<option value="jiangsu">江苏省</option>
					<option value="zhejiang">浙江省</option>
					<option value="anhui">安徽省</option>
				</optgroup>
			</select>
	</form>
	<hr />
	
	
	<form action="" method="post">
			<button type="submit">提交</button>&nbsp;&nbsp;
			<button type="reset">重置</button>&nbsp;&nbsp;
			<button type="button">确定</button><br /><br />
			<button type="button"><img src="D:/WebHTML5/ClickEnter.jpg" width="100" height="30"></button>&nbsp;&nbsp;&nbsp;&nbsp;
			<button type="button">
				<img width="128" height="40" src="https://dgss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-09-26/352f1d243122cf52462a2e6cdcb5ed6d.png">
			</button>
	</form>
	<hr />


	<form action="" method="post">
			<p>学习经历</p>
			<textarea rows="5" cols="60" placeholder="从初中开始，必填" required="required"></textarea><br />
			<p>备注</p>
			<textarea rows="4" cols="60"></textarea><br />
			<input type="submit" name="" id="" value="确定" />&nbsp;&nbsp;<input type="reset" name="" id="" value="重置输入" />
		</form>
	<hr />
		
	
		
	




</body>
</html>
